import React, { Component } from 'react';

import BreadcrumbCustom from "../../components/BreadCrumb";

import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';
// import { setVisibilityFilter } from '../../reducer/action.js';

import ReduxA from './ReduxA'
import ReduxB from './ReduxB'

import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;

const plainOptions = ['reduxA', 'reduxAa', 'reduxB', 'reduxBa'];
const defaultCheckedList = ['reduxA', ];

class Redux extends Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  }

  componentWillMount() {
    // console.log(this.props.store.checkLists)
    let checkLists = this.props.store.checkLists
    this.setState({
      checkedList: checkLists
    })
  }

  render() {
    // const { visibilityFilter, path } = this.props
    // console.log(this.props)
    return (
      <div>
        <BreadcrumbCustom paths={['index', 'nav1', 'redux' ]}/>
        <h3>Redux</h3>

        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />

        <h4>下级</h4>
        <div className="flex-row center">
          
          <ReduxA />
          <ReduxB />
          
        </div>

      </div>
    )
  }

  onChange = (checkedList) => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
      checkAll: checkedList.length === plainOptions.length,
    });
    console.log(checkedList)
    // this.props.addTodo(checkedList)
    this.props.saveCheckList(checkedList)
  }
  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
    // console.log(plainOptions)
    e.target.checked ? this.props.saveCheckList(plainOptions) : this.props.saveCheckList([])
  }

}

// state -- store.state    ownProps -- 容器组件的props对象
const mapStateToProps = (state, ownProps) => {
  const visibilityFilter = state.visibilityFilter;
  const todos = state.todos
  const checkLists = state.checkLists
  const store = {
    'visibilityFilter': visibilityFilter,
    'todos': todos,
    'checkLists': checkLists,
  }
  // console.log(store)
  return { store }
}

// const mapDispatchToProps = dispatch => ({
//   setVisibilityFilter: bindActionCreators(setVisibilityFilter, dispatch),
// });

const mapDispatchToProps = (dispatch) => {
  return {
    setVisibilityFilter: (filter) => {
      // console.log(filter)
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: filter,
      })
    },
    addTodo: (text) => {
      dispatch({
        type: 'ADD_TODO',
        text: text
      })
    },
    saveCheckList: (checkList) => {
      // console.log(checkList)
      dispatch({
        type: 'SAVE_CHECKEDLIST',
        checkList: checkList
      })
    }

  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Redux);